<template>
  <div class="issue" :style="{ minHeight: bodyHeight + 'px' }">
    <helper v-if="!orderlist.length && !getData">
      <template v-slot:image>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-kong1"></use>
        </svg>
      </template>
      <span slot="helperText">{{ $t("emptyIssue") }}</span>
    </helper>
    <template v-else>
      <div class="issueOrder" v-for="(item, index) in orderlist" :key="index">
        <div class="issueOrdertop">
          <div class="issueTime">{{ getissueTime(item.orderCreateTime) }}</div>
          <div class="issuePrice">
            <span class="symbol">&yen;&nbsp;</span>
            <span class="priceNumber" v-text="item.orderPrice"></span>
          </div>
        </div>
        <order-content :item="item" />
        <myProgress :orderStatus="item.orderStatus">
          <span class="progressName" slot="progressText">
            {{ $t("orders.progress") }}
          </span>
        </myProgress>
        <button-widget
          useDoWhat="update"
          :buttonText="$t('orders.modify')"
          :disabled="item.orderStatus === 4"
          @click.native="updateOrder(item._id, index)"
        ></button-widget>
      </div>
    </template>
    <div class="block" />
  </div>
</template>

<script>
import orderContent from 'components/content/order/content.vue';
import myProgress from 'components/content/order/progress.vue';
import buttonWidget from 'components/common/button-widget/button-widget.vue';
import helper from 'components/content/helper/helper.vue';

export default {
    components: {
        helper,
        orderContent,
        myProgress,
        buttonWidget
    },
    data () {
        return {
            bodyHeight: 0,
            progressValue: 0,
            orderlist: [],
            getData: false
        };
    },
    created () {
        const userid = localStorage.getItem('id');
        if (userid) {
            this.$api.orderApi
                .findUserorders(userid)
                .then(res => {
                    this.getData = !!res.data.length;
                    this.orderlist = res.data;
                })
                .catch(err => {
                    throw Error(err);
                });
        }
    },
    mounted () {
        const tabbarHeight = this.$store.state.tabbarHeight;
        this.bodyHeight = this.$util.ScreenCanUseHeight(tabbarHeight + 44);
    },
    computed: {
    // 转换发布订单的时间
        getissueTime () {
            return function (time) {
                return this.$moment(time).format('MM月DD日 HH:mm') + '发布';
            };
        }
    },
    methods: {
        updateOrder (orderId) {
            // 更新订单之前需要判断该订单是否被接单
            this.$api.orderApi.detail(orderId)
                .then(result => {
                    const { isOrderTaked } = result.data;
                    if (isOrderTaked) {
                        this.$util.failToast('该订单已有人跑腿，无法修改信息');
                    } else {
                        this.$router.push({
                            name: 'updateOrder',
                            params: { orderId }
                        });
                    }
                });
        }
    }
};
</script>

<style scoped lang="less" src="./less/my-issue.less"></style>
